<template>
    <div class="option-match-container">
        <p>您已与公共表单项{{ commonOption.name }}匹配，请继续完成选项值匹配</p>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            max-height="300"
            border
            style="width: 100%">
            <el-table-column
                prop="name"
                label="选项名称"
                show-overflow-tooltip
                width="120">
            </el-table-column>
            <el-table-column
                label="匹配">
                <template slot-scope="scope">
                    <div class="table-checkbox">
                        <el-checkbox-group v-model="scope.row.checkList">
                            <template v-for="item in commonOption.optionList">
                                <el-checkbox :label="item.id" :key="item.id" @change="changeCheck($event, item.id, scope.$index)">{{ item.name }}</el-checkbox>
                            </template>
                        </el-checkbox-group>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="添加为新选项"
                width="140">
                <template slot-scope="scope">
                    <el-checkbox-group v-model="scope.row.checkList">
                        <el-checkbox label="newOption" key="newOption" @change="changeCheck($event, 'newOption', scope.$index)">
                            <el-input v-model="scope.row.itemOptionValue" :disabled="!scope.row.checkList.includes('newOption')" style="width: 80px;" size="mini"></el-input>
                        </el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";

@Component({
    name: "OptionMatchNotAlive"
})
export default class OptionMatchNotAlive extends Vue {
    @Prop({ default: () => { return {}; } }) private commonOption!: any;
    @Prop({ default: () => { return {}; } }) private fillData!: any;

    tableData: any[] = []

    created() {
        this.tableData = this.fillData.optionList.map((item: any) => {
            const list = this.commonOption.optionList.filter((cur: any) => {
                return cur.name === item.name;
            });
            const id = list.length ? list[0].id : "";
            return {
                name: item.name,
                itemOption: item.id,
                labelOption: id,
                itemOptionValue: item.name,
                checkList: id ? [id] : []
            };
        });
    }

    changeCheck(checked: boolean, val: any, index: number) {
        if (checked) {
            this.tableData[index].checkList = [val];
            this.tableData[index].labelOption = val;
        } else {
            this.tableData[index].checkList = [];
            this.tableData[index].labelOption = "";
        }
    }

    checkTableData() {
        const itemOptionValue = this.tableData.filter((item: any) => item.checkList[0] === "newOption").map((item: any) => item.itemOptionValue);
        if (itemOptionValue.includes("")) {
            this.$message.error("请填写新选项名称");
            return false;
        }
        return this.tableData.map((item: any) => {
            return {
                itemOption: item.itemOption,
                labelOption: item.labelOption === "newOption" ? "" : item.labelOption,
                itemOptionValue: item.labelOption === "newOption" ? item.itemOptionValue : ""
            };
        });
    }

    beforeDestroy() {
        this.tableData = [];
    }
}
</script>

<style scoped lang="scss">
.table-checkbox {
    max-height: 100px;
    overflow-y: auto;
}
</style>
